<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Venus文件共享</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        /* 页面特定样式 */
        .header {
            text-align: center;
            margin-bottom: var(--spacing-xl);
        }

        .header h1 {
            font-size: var(--font-size-xl);
            color: var(--text-color);
            margin-bottom: var(--spacing-md);
            transition: color var(--transition-normal);
        }

        .actions {
            display: flex;
            gap: var(--spacing-md);
            justify-content: center;
            margin-bottom: var(--spacing-lg);
        }

        .file-list {
            margin-top: var(--spacing-lg);
        }

        .file-item {
            display: flex;
            align-items: center;
            padding: var(--spacing-md);
            border-radius: var(--border-radius-sm);
            margin-bottom: var(--spacing-sm);
            background-color: var(--background-color);
            transition: all var(--transition-fast);
            border: 1px solid var(--border-color);
        }

        .file-item:hover {
            transform: translateX(var(--spacing-xs));
            border-color: var(--primary-color);
        }

        .file-icon {
            margin-right: var(--spacing-md);
            color: var(--primary-color);
            font-size: var(--font-size-lg);
        }

        .empty-state {
            text-align: center;
            padding: var(--spacing-xl);
            color: var(--text-color);
            opacity: 0.7;
        }

        .empty-state i {
            margin-bottom: var(--spacing-md);
            color: var(--text-color);
            opacity: 0.5;
        }

        .upload-btn {
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-sm);
        }

        .upload-btn i {
            font-size: var(--font-size-md);
        }

        /* 暗色模式适配 */
        [data-theme="dark"] .file-item {
            background-color: rgba(255, 255, 255, 0.05);
        }

        [data-theme="dark"] .file-item:hover {
            background-color: rgba(74, 144, 226, 0.2);
        }

        [data-theme="dark"] .empty-state {
            color: rgba(255, 255, 255, 0.7);
        }

        [data-theme="dark"] .empty-state i {
            color: rgba(255, 255, 255, 0.5);
        }
    </style>
</head>

<body>
    <div class="container">
        <button class="theme-toggle" onclick="toggleTheme()" title="切换主题">
            <i class="fas fa-moon"></i>
        </button>

        <div class="header">
            <h1>Venus本地文件共享系统</h1>
            <div class="actions">
                <a href="{{ url_for('upload_file') }}" class="btn btn-primary upload-btn">
                    <i class="fas fa-upload"></i>
                    上传文件
                </a>
            </div>
        </div>

        <div class="card">
            {% if files %}
            <ul class="file-list">
                {% for file in files %}
                <li class="file-item">
                    <i class="file-icon fas {% if file.endswith(('.jpg', '.png', '.gif', '.jpeg')) %}fa-image
                        {% elif file.endswith(('.pdf')) %}fa-file-pdf
                        {% elif file.endswith(('.doc', '.docx')) %}fa-file-word
                        {% elif file.endswith(('.xls', '.xlsx')) %}fa-file-excel
                        {% elif file.endswith(('.zip', '.rar', '.7z')) %}fa-file-archive
                        {% elif file.endswith(('.mp3', '.wav', '.ogg')) %}fa-file-audio
                        {% elif file.endswith(('.mp4', '.avi', '.mov')) %}fa-file-video
                        {% elif file.endswith(('.apk')) %}fa-android
                        {% else %}fa-file
                        {% endif %}"></i>
                    <a href="{{ url_for('uploaded_file', filename=file) }}" title="{{ file }}">{{ file }}</a>
                </li>
                {% endfor %}
            </ul>
            {% else %}
            <div class="empty-state">
                <i class="fas fa-inbox fa-3x"></i>
                <p>暂无文件</p>
                <p>点击上方的"上传文件"按钮添加文件</p>
            </div>
            {% endif %}
        </div>
    </div>

    <footer class="footer">
        <p>&copy; {{ now.year }} Venus. All rights reserved.</p>
    </footer>

    <script>
        function toggleTheme() {
            const html = document.documentElement;
            const themeToggleBtn = document.querySelector('.theme-toggle i');
            const current = html.getAttribute('data-theme');
            const newTheme = current === 'dark' ? 'light' : 'dark';
            
            html.setAttribute('data-theme', newTheme);
            localStorage.setItem('theme', newTheme);
            
            // 更新图标
            themeToggleBtn.className = newTheme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
        }

        // 初始化主题
        const savedTheme = localStorage.getItem('theme') || 'light';
        document.documentElement.setAttribute('data-theme', savedTheme);
        const themeToggleBtn = document.querySelector('.theme-toggle i');
        themeToggleBtn.className = savedTheme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';

        // 添加页面载入动画
        document.addEventListener('DOMContentLoaded', function() {
            document.body.style.opacity = '0';
            setTimeout(() => {
                document.body.style.transition = 'opacity 0.5s ease';
                document.body.style.opacity = '1';
            }, 0);
        });
    </script>
</body>
</html>